<template>
    <el-form label-width="120px" ref="numberValidateForm" :model="form">
        <el-row>
            <el-col :offset="2" :span="9">
                <el-form-item label="类别一" prop="CategoryOne">
                    <el-select width="100%" v-model="form.CategoryOne" filterable placeholder="请选择类型" style="width:100%" @change="CateoryChange">
                        <el-option value="">全部</el-option>
                        <el-option v-for="(v,k) in AllCategoryOne" :value="v.Id" :data-userid="v.Id" v-text="v.CategoryName"
                                   :key="v.CategoryName"
                                   :label="v.CategoryName" />
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :offset="2" :span="9">
                <el-form-item label="类别二" prop="CategoryTwo">
                    <el-select width="100%" v-model="form.CategoryTwo" filterable placeholder="请选择类型" style="width:100%">
                        <el-option :value="0" label="无"></el-option>
                        <el-option v-for="(v,k) in CategoryTwoById" :value="v.Id" :data-userid="v.Id" v-text="v.CategoryName"
                                   :key="v.CategoryName"
                                   :label="v.CategoryName" />
                    </el-select> 
                </el-form-item>
            </el-col>
        </el-row>

        <el-row>
            <el-col :offset="2" :span="9">
                <el-form-item label="金额" prop="Money">
                    <el-input v-model="form.Money"></el-input>
                </el-form-item>
            </el-col>

            <el-col :offset="2" :span="9">
                <el-form-item label="用途" prop="Purpose">
                    <el-input v-model="form.Purpose"></el-input>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row>
            <el-col>
                <div style="text-align:center">
                    <el-button type="success" @click="SaveFinanceDocDetail">提交</el-button>
                </div>
            </el-col>
        </el-row>
    </el-form>
</template>
<script>
    export default {
        name: "UpFinanceLoandetails",
        props: {
            form: {
                type: Object,
                required: true
            },
        },
        data() {
            return {
                AllCategory: [],
                AllCategoryOne: [],
                AllCategoryTwo: [],
                CategoryTwoById: [],
            }
        },
        watch: {
            form: function (val) {
                val.AllCategoryTwo == 0 ? "" : val.AllCategoryTwo;
                this.CateoryChange(val.CategoryOne)
            },
        },
        created() {
            this.GetAllFinanceCategorytoarray(true);
        },
        methods: {
            GetAllFinanceCategorytoarray: async function (bit) {
                await this.$http.get("/PublicMethodApi/GetAllFinanceCategory").then(x => {
                    for (var i = 0; i < x.data.length; i++) {
                        this.AllCategory.push(x.data[i])
                        if (x.data[i].ParentId == 0) {
                            this.AllCategoryOne.push(x.data[i]);
                        } else {
                            this.AllCategoryTwo.push(x.data[i]);
                        }
                    }
                    if (bit) {
                        this.CateoryChange(this.form.CategoryOne)
                    }
                }).catch(() => {
                    this.$message.error('服务器异常,请联系管理员!')
                })
            },
            CateoryChange(val) {
                this.form.CategoryTwo = '';
                this.CategoryTwoById = [];
                var parid = parseInt(val);
                for (var i = 0; i < this.AllCategoryTwo.length; i++) {
                    if (parid == this.AllCategoryTwo[i].ParentId) {
                        this.CategoryTwoById.push(this.AllCategoryTwo[i]);
                    }
                }
                if (this.CategoryTwoById.length > 0) {
                    if (this.form.CategoryTwo == 0 || this.form.CategoryTwo == "") {
                        this.form.CategoryTwo = this.CategoryTwoById[0].Id;
                    }
                } else {
                    this.form.CategoryTwo = 0;
                }
            },
            GetNameById(id) {
                for (var i = 0; i < this.AllCategory.length; i++) {
                    let Id = parseInt(id)
                    if (Id == this.AllCategory[i].Id) {
                        return this.AllCategory[i].CategoryName;
                    }
                }
            },
            SaveFinanceDocDetail() {
                this.$parent.$parent.UpFinanceLoandetailsShow = false;
                this.$parent.$parent._GetAddAllMoney();
                //this.$parent.$parent.GetdetailedDB();
            },
        }
    }
</script>






